<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="/images/favicon.ico"  type="image/x-icon">

    <title>在线考试系统</title>

    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
<body class="horizontal-menu-page">

<section>

    <div th:replace="~{user/commons/common :: commonhead('paper.html')}"></div>


    <!--正文开始-->
    <div class="wrapper">
        <div class="col-md-12">
            <!--问题列表开始-->
            <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        正在考试......

                        <span class="pull-right">
                                     <a id="countTime" value=""></a>
                        </span>
                    </div>

                    <div class="panel-body">

                        <!--                                隐藏域-->
                        <input class="hidden" id="size">
                        <input class="hidden" id="pid" th:value="${pId}">
                        <input class="hidden" id="singleNum">
                        <input class="hidden" id="moreNum" >
                        <input class="hidden" id="questionType" >
                        <input class="hidden" id="num" >
                        <input class="hidden" id="status" >
                        <input class="hidden" id="endTime">
                        <!--  从ajax响应中获取-->
                        <input class="hidden" id="checkAnswer">

                        <!--                                隐藏域-->

    <!--                    题目描述-->
                        <div class="col-lg-12">
                           <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">题目描述</h3>
                                </div>
                                <div class="panel-body">
                                    <h4 id="title" class="color-terques"></h4>
                                </div>
                            </div>
                        </div>

    <!--                    作答区-->
                        <div class="col-lg-8">
                            <div class="panel panel-default">
                                <div class="panel-heading">作答区</div>
                                    <div class="panel-body">
<!--                                        单选-->
                                        <div class="form-group hidden" id="s_radio">

                                            <div class="col-sm-12 icheck">

                                                <div class="form-check  single-row hidden" id="r_A">
                                                    <div class="radio">
                                                        <input tabindex="3" type="radio"   name="r_choice" value="A">
                                                        <div> A </div>
                                                        <div id="radio_A" style="font-weight: normal"></div>
                                                    </div>
                                                </div>
                                                <div class="form-check  single-row hidden" id="r_B">
                                                    <div class="radio">
                                                        <input tabindex="3" type="radio"  name="r_choice" value="B">
                                                        <div> B </div>
                                                        <div id="radio_B"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="r_C">
                                                    <div class="radio ">
                                                        <input tabindex="3" type="radio"   name="r_choice" value="C">
                                                        <div> C </div>
                                                        <div id="radio_C"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="r_D">
                                                    <div class="radio ">
                                                        <input tabindex="3" type="radio"   name="r_choice" value="D">
                                                        <div> D </div>
                                                        <div id="radio_D"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="r_E">
                                                    <div class="radio ">
                                                        <input tabindex="3" type="radio"  name="r_choice" value="E">
                                                        <div> E </div>
                                                        <div id="radio_E"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="r_F">
                                                    <div class="radio ">
                                                        <input tabindex="3" type="radio" name="r_choice" value="F">
                                                        <div> F </div>
                                                        <div id="radio_F"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="r_G">
                                                    <div class="radio ">
                                                        <input tabindex="3" type="radio" name="r_choice" value="G">
                                                        <div> G </div>
                                                        <div id="radio_G"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="r_H">
                                                    <div class="radio ">
                                                        <input tabindex="3" type="radio"  name="r_choice" value="H">
                                                        < <div> H </div>
                                                        <div id="radio_H"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                            </div>

                                        </div>
 <!--                                                多选-->
                                        <div class="form-group hidden" id="s_checkBox">
                                            <div class="col-sm-12 icheck">

                                                <div class="form-check  single-row hidden" id="c_A">
                                                    <div class="checkbox">
                                                        <input tabindex="3" type="checkbox"  name="c_choice" value="A">
                                                        <div> A </div>
                                                        <div id="check_A"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>
                                                <div class="form-check  single-row hidden" id="c_B">
                                                    <div class="checkbox">
                                                        <input tabindex="3" type="checkbox"   name="c_choice" value="B">
                                                        <div> B </div>
                                                        <div id="check_B" style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="c_C">
                                                    <div class="checkbox ">
                                                        <input tabindex="3" type="checkbox"  name="c_choice" value="C">
                                                        <div> C </div>
                                                        <div id="check_C"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="c_D">
                                                    <div class="checkbox ">
                                                        <input tabindex="3" type="checkbox" name="c_choice" value="D">
                                                        <div> D </div>
                                                        <div id="check_D"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="c_E">
                                                    <div class="checkbox ">
                                                        <input tabindex="3" type="checkbox"   name="c_choice" value="E">
                                                        <div> E </div>
                                                        <div id="check_E"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="c_F">
                                                    <div class="checkbox ">
                                                        <input tabindex="3" type="checkbox"  name="c_choice" value="F">
                                                        <div> F </div>
                                                        <div id="check_F"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="c_G">
                                                    <div class="checkbox ">
                                                        <input tabindex="3" type="checkbox" name="c_choice" value="G">
                                                        <div> G </div>
                                                        <div id="check_G"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                                <div class="form-check  single-row hidden" id="c_H">
                                                    <div class="checkbox ">
                                                        <input tabindex="3" type="checkbox"  name="c_choice" value="H">
                                                         <div> H </div>
                                                        <div id="check_H"  style="font-weight: normal"></div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <!--上一题开始-->
                                                <button class="btn btn-info pull-left" id="lastQ" type="button" value="" onclick="nextNum(this.value,this)"><i class="fa fa-mail-reply">上一题</i></button>
                                            <!--下一题开始-->
                                                <button class="btn btn-info pull-right" id="nextQ" type="button" value="" onclick="nextNum(this.value,this)"><i class="fa fa-mail-forward">下一题</i></button>

                                        </div>

                                    </div>
                                </div>
                            </div>

    <!--                    题目导航-->
                        <div class="col-lg-4">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <h3 class="panel-title">题目导航</h3>
                                </div>
                                <div class="panel-body">
                                    <div>
                                        <p><strong>一.单选题</strong></p>
                                           <div>
                                               <div id="single" >


                                               </div>
                                           </div>
                                    </div>

                                    <div>
                                          <p><strong>二.多选题</strong></p>
                                        <div>
                                            <div id="more">


                                            </div>
                                        </div>

                                    </div>
                                    <br/>
                                    <br/>
                                    <br/>
                                    <form>
                                        <div style="text-align: center" div="goSingle">
                                            <button class="btn btn-sm btn-success" type="button" href="javascript:;" onclick="finishExam()">提交</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!--正文结束-->

    <!--底部开始-->
    <footer class="sticky-footer">
        2022 &copy;<a href="https://www.pdsu.edu.cn/" target="_blank">平顶山学院软件应用双创实验室提供技术支持</a>
    </footer>
    <!--底部结束-->

</section>

<div th:replace="~{user/commons/common :: commonupdatePwd}"></div>

<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.nicescroll.js"></script>
<script type="text/javascript">


    //初始化操作
    $(document).ready( function() {


        // // 考试倒计时
        // function TimeDown(id , endDateStr) {
        //     console.log(endDateStr)
        //     //结束时间
        //     var endDate = new Date(endDateStr);
        //     //当前时间
        //     var nowDate = new Date();
        //     //相差的总秒数
        //     var totalSeconds = parseInt((endDate - nowDate) / 1000);
        //     //取模（余数）
        //     var modulo = totalSeconds % (60 * 60 * 24);
        //     //小时数
        //     var hours = Math.floor(modulo / (60 * 60));
        //     modulo = modulo % (60 * 60);
        //     //分钟
        //     var minutes = Math.floor(modulo / 60);
        //     //秒
        //     var seconds = modulo % 60;
        //     //输出到页面
        //     //document.getElementById(id).innerHTML = "还剩:" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        //     document.getElementById(id).innerHTML = "距离结束还有"+ hours+ "小时"+ minutes + "分钟"+ seconds + "秒";
        //     if( hours+minutes+seconds <= 0){
        //         alert("时间已到！");
        //         toFinish();
        //     }else{
        //         //延迟一秒执行自己
        //         setTimeout(function () {
        //             TimeDown(id, endDateStr);
        //         }, 1000)
        //     }
        //
        // }
        //
        // //初始化
        // $("#s_radio").addClass("hidden")
        // $("#s_checkBox").addClass("hidden")
        // $("#lastQ").removeClass("hidden")
        // $("#nextQ").removeClass("hidden")
        //
        // var singleNum = $("#singleNum").val()
        // var pId = $("#pid").val()
        // var moreNum = $("#moreNum").val()
        //
        // var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
        // for (var i = 0; i<arr.length;i++){
        //     $("#c_"+arr[i]+"").addClass("hidden")
        //     $("#r_"+arr[i]+"").addClass("hidden")
        // }
        //
        //
        //
        // var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
        // var len = $('#size').val()
        // var questionType = $("#questionType").val()
        // var num = $('#num').val()
        // if(questionType == 1){ // 单选题
        //     $("#s_radio").removeClass("hidden");
        //     for (var i = 0; i < len; i++) {
        //         //移除隐藏状态、
        //         $("#r_" + arr[i] + "").removeClass("hidden")
        //     }
        // }
        // if (questionType == 2){   // 多选题
        //     $("#s_checkBox").removeClass("hidden");
        //     for (var j = 0; j < len; j++) {
        //         //移除隐藏状态、
        //         $("#c_" + arr[j] + "").removeClass("hidden")
        //     }
        // }
        // // 下一题 条件显示
        // if(num == parseInt(singleNum) + parseInt(moreNum)){
        //     $("#nextQ").addClass("hidden")
        // }
        //
        // // 上一题 条件显示
        // if(num == 1){
        //     $("#lastQ").addClass("hidden")
        // }
        //
        // // 调用计时函数
        // var endDateStr = $("#endTime").val()
        // TimeDown("countTime",endDateStr)
        //
        // // 添加按钮
        // addButton(singleNum,moreNum)
        // // 题目导航框按钮回显
        // document.getElementById("btn_"+num).style.backgroundColor="#DCDCDC"
        //
        //
        // // 回显
        // var status = $("#status").val()
        // var checked = $("#checked").val()
        //
        // if (status == 1){
        //     if (questionType == 1){
        //         // 单选框数据回显
        //         $(':radio[name=\'r_choice\'][value=\'' + checked+ '\']').prop('checked', 'checked');
        //     }else if (questionType == 2){
        //         //获得所要回显的值
        //         var checkeds = $("#checkAnswer").val();
        //         //拆分为字符串数组
        //         var checkArray =checkeds.split("");
        //         //获得所有的复选框对象
        //         var checkBoxAll = $("input[name='c_choice']");
        //
        //         $.each(checkArray , function (index , expressValue) {
        //             checkBoxAll.each(function () {
        //                 if ($(this).val() == expressValue){
        //                     $(this).attr("checked",true)
        //                 }
        //             })
        //         })
        //     }
        //
        // }

    })

    var pId = $("#pid").val()


    // 单选框点击取消
    var check;
    $('input[type="radio"]').hover(function() {
        check = $(this).is(':checked');
    });

    $('input[type="radio"]').click(function() {
        check = !check;
        $(this).attr("checked", check);
    });


    // 下一题 上一题 题目导航  并将本题所答存入数据库
    function nextNum(value,_this) {
        //使按钮失去焦点,不设置会导致按钮持续高亮
        _this.blur()

        // 切换题目
        toNUm(value)
    }

    // 切换题目
    function toNUm(value) {
        // 获取单选框和多选框的值
        var answerList = [];//保存数据信息
        var answers = "";
        var doStatus = $("#status").val();
        var questionType = $("#questionType").val()
        var currentNum =$("#num").val()
        if (questionType == 1){
            //获取选中信息
            answers = $("input[name='r_choice']:checked").val();
            $("input[name='r_choice']:checked").attr("checked",false);
        }else if(questionType == 2){
            //获取选中信息
            $("input[name='c_choice']:checked").each(function (index) {
                answerList[index] = $(this).val();
                this.checked = false;
            });
        }
        $.ajax({
            // 请求路径
            url : "/user/paper/paperDetails",
            //请求类型
            method : "POST",
            //请求是否异步，默认为异步，这也是ajax重要特性
            async:true,
            //data表示发送的数据
            data: JSON.stringify({
                pid : pId,
                num : currentNum,
                numNext : value,
                answer : answers,   // 单选
                answerList : answerList,  // 多选
                isNew : doStatus               // 传回一个状态值 表示本题是否做过
            }), //定义发送请求的数据格式为JSON字符串
            contentType: "json/application",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType: "json",
            // 成功响应的结果
            success: function (data) {
                if (data.code == 200){
                    // 更改隐藏域
                    $("#questionType").val(data.questionType)
                    $("#size").attr("value",data.questionObject.questionItemObjects.length)
                    $("#checkAnswer").attr("value",data.checked)
                    $("#status").attr("value",data.status)    // 是否已经做过
                    $("#num").attr("value",data.num) // 更改题号

                    var numC = $("#num").val()
                    //改变题目
                    $('#title').attr("text",data.num+'.'+data.questionObject.titleContent)
                        .html(data.num+'.'+data.questionObject.titleContent)


                    if (data.isSave == 1){
                        document.getElementById("btn_"+currentNum).style.backgroundColor="#F0FFF0";
                    }else{
                        document.getElementById("btn_"+currentNum).style.backgroundColor=""
                    }
                    document.getElementById("btn_"+data.num).style.backgroundColor="#DCDCDC"

                    //初始化
                    $("#s_radio").addClass("hidden")
                    $("#s_checkBox").addClass("hidden")
                    $("#lastQ").removeClass("hidden")
                    $("#nextQ").removeClass("hidden")

                    var arr = ['A','B','C','D','E', 'F', 'G', 'H','I','J']
                    for (var i = 0; i<arr.length;i++){
                        $("#c_"+arr[i]+"").addClass("hidden")
                        $("#r_"+arr[i]+"").addClass("hidden")
                    }
                    // 获取选项个数
                    var size = data.questionObject.questionItemObjects.length

                    // 判断单选还是多选
                    if (data.questionType == 1){ //单选
                        $("#s_radio").removeClass("hidden")
                        for(var i = 0; i<size;i++){
                            $("#r_"+data.questionObject.questionItemObjects[i].prefix+"").removeClass("hidden")

                            $("#radio_"+data.questionObject.questionItemObjects[i].prefix+"")
                                .attr("text",data.questionObject.questionItemObjects[i].content)
                                .html(data.questionObject.questionItemObjects[i].content)
                        }
                        // 单选框数据回显
                        if (data.status == 1){
                            $(':radio[name=\'r_choice\'][value=\'' + data.checked+ '\']').prop('checked', 'checked');
                        }
                    }else if (data.questionType == 2){ //多选
                        $("#s_checkBox").removeClass("hidden")
                        for(var i = 0; i<size;i++){
                            $("#c_"+data.questionObject.questionItemObjects[i].prefix+"").removeClass("hidden")

                            $("#check_"+data.questionObject.questionItemObjects[i].prefix+"")
                                .attr("text",data.questionObject.questionItemObjects[i].content)
                                .html(data.questionObject.questionItemObjects[i].content)
                        }
                        // 多选框数据回显
                        if (data.status == 1) {
                            //获得所要回显的值
                            var checkeds = $("#checkAnswer").val();
                            //拆分为字符串数组
                            var checkArray =checkeds.split("");
                            //获得所有的复选框对象
                            var checkBoxAll = $("input[name='c_choice']");

                            $.each(checkArray , function (index , expressValue) {
                                checkBoxAll.each(function () {
                                    if ($(this).val() == expressValue){
                                        $(this).attr("checked",true)
                                    }
                                })
                            })
                        }
                    }

                    //设置下一题上一题id
                    $('#nextQ').attr("value",data.num+1)
                    $('#lastQ').attr("value",data.num-1)

                    // 下一题 条件显示

                    if (numC == parseInt($("#singleNum").val()) + parseInt($("#moreNum").val())){
                        console.log(numC)
                        $("#nextQ").addClass("hidden")
                    }

                    // 上一题 条件显示
                    if(numC == 1){
                        $("#lastQ").addClass("hidden")
                    }

                }else{
                    alert("系统出现了一点问题，请重试！")
                }
            },
        })
    }



    // 提交
    function finishExam() {
        if (confirm("是否要提交?")){
            toFinish();
        }else{
            return
        }
    }

    // 提交最后一道题
    function toFinish() {
        // 获取单选框和多选框的值
        var answerList = [];//保存数据信息
        var answers = "";
        var questionType = $("#questionType").val()
        var currentNum =$("#num").val()
        var doStatus = $("#status").val();
        console.log("进入了提交")
        if (questionType == 1){
            //获取选中信息
            answers = $("input[name='r_choice']:checked").val();
            $("input[name='r_choice']:checked").attr("checked",false);
        }else if(questionType == 2){
            //获取选中信息
            $("input[name='c_choice']:checked").each(function (index) {
                answerList[index] = $(this).val();
                this.checked = false;
            });
        }
        $.ajax({
            url : "/user/paper/paperFinish",
            method : "POST",
            async : true,
            data : JSON.stringify({
                pid : pId,
                num : currentNum,
                answer : answers,   // 单选
                answerList : answerList,  // 多选
                isNew : doStatus           // 传回一个状态值 表示本题是否做过
            }),
            contentType: "json/application",
            dataType: "json",
            success : function (data) {
                if (data.code == 200){
                    if (data.isCheck){
                        alert("考试提交成功，您的总成绩为"+data.score+"!")
                        window.location.href = "/user/paper"
                    }else{
                        alert("提交失败，请重试！")
                    }
                }else{
                    alert("系统出现了问题，请重试！")
                }
            }
        })
    }


    // 动态生成按钮
    function addButton(single, more) {

        var n = parseInt(single) + parseInt(more);
       for (var i =1; i <= n; i++){
           var btn = document.createElement("input");
           btn.type = "button";
           btn.value = i;
           btn.className = "btn btn-default";
           btn.id = "btn_"+i;
           console.log(i)
           btn.onclick = function(){
               toNUm(this.value)
           };
           if (i > single){
               document.getElementById("more").appendChild(btn)
           }else{
               document.getElementById("single").appendChild(btn)
           }
       }
    }

    // 修改密码
    $("#pwd_btn").click(function() {
        $("#pwd_btn").blur();
        if (confirm("是否确定修改?")){
            var submit = true;
            var oldPwd = $("#oldPwd").val(); //原始密码
            var newPwd = $("#newPwd").val(); //新密码1
            var newPwd2 = $("#newPwd2").val(); //新密码2

            if ((oldPwd && newPwd && newPwd2) == '') {
                $("#tip").html("密码不能为空");
                $("#tip").show();
                submit = false;
            }
            if(submit){
                $.ajax({
                    type:"post",
                    url:"/user/updatePwd",
                    data: JSON.stringify({
                        oldPwd : oldPwd,
                        newPwd : newPwd,
                        newPwd2 : newPwd2
                    }),
                    contentType: "application/json;charset=utf-8",
                    //定义回调响应的数据格式为JSON字符串，该属性可以省略
                    dataType: "json",
                    success:function (data){
                        if(data.code == 200 ){
                            $("#tip").hide();
                            $("#pwd_form").submit();
                            alert("修改成功，请重新登录!")
                            window.location.href = "/user/logout"
                        }else if(data.code != 200){
                            $("#tip").html(data.info);
                            $("#tip").show();
                        }
                    }
                });
            }
        }
    });


</script>

<script src="/js/scripts.js"></script>

</body>
</html>